<!DOCTYPE html>
<!--
    Design förslag på ny startsida
-->
<html>
    <head>
        <title>Wextr</title>
        <link rel="shortcut icon" href="bilder/thumbnail.png"/>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./js/globalFunctions.js"></script>
        <script src="./js/index.js"></script>
        <script src='./js/login.js'></script>
        <script src='./js/validate.js'></script>
        <script src='./js/validateToken.js'></script>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/prototyp5.css" />
        <link rel="stylesheet" href="css/about.css" />
    </head>
    <body class="playfull-background">
        
        <div id="search-wrapper">
            <div id="search-container">
                <div class="wrap">
                    <a href="index.html">
                        <div id="startsida-content-logo-box"></div>
                    </a>

                    <div id="startsida-content-search-box">
                        <form class="form" id='main_search'>
                            <input type="text" id='main_search_box' autocomplete="off" placeholder="Topic" required>
                            <button type="submit"></button>
                        </form>
                    </div>

                    <div id="startsida-content-howto-box">
                        <h3 class="startsida-content-howto-box">Search for a topic to chat about with other people around the world.</h3>
                    </div>

                    <div id="message-for-user">
                        <p class="light">Wextr is in Beta Mode &nbsp;  <b>|</b>  &nbsp; To be able to use Wextr you need to create an account and sign up with a beta key.</p>
                    </div>

                </div>
            </div>
        </div>
        
        <div id="overlayer">
            <div class="wrap">
                <h1 style="text-align: center; border-bottom: 1px solid #696969; margin-bottom: 20px;">FEATURED</h1>
                <div class="featured-container">wextr (background: någon snygg bild på vad chattrummet innehåller med grå layer)</div>
                <div class="featured-container">manga</div>
                <div class="featured-container">smash</div>
                <div class="featured-container">lol</div>
                <div class="featured-container">hon</div>
                <div class="featured-container">hockey</div>
                <div class="featured-container">programming</div>
            </div>
        </div>
    </body>
</html>
